<template>
  <div class="jssdk"></div>
  <button @click="chooseImage">上传图片</button>
  <img :src="img" alt="">
</template>

<script>
export default {
  data() {
    return {
      img:'',
    }
  },
  created() {
    this.getAccessToken()
  },
  methods: {
    chooseImage() {
      const _this = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          console.log(localIds);
          _this.img = localIds
        }
      })
    },
    init({ appId, signature, noncestr: nonceStr, timestamp }) {
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature, // 必填，签名，见附录1
        jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    },
    getAccessToken() {
      this.$axios
        .get(
          `${this.$serveHost}/wx/user/getAccessToken?appId=${this.$appid}&referer=${window.location.href}`
        )
        .then((res) => {
          console.log(res)
          this.init(res.data)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.jssdk {
}
</style>